<template>
  <div class="wlw">
    <Table
      :tableData="paneD.tableDataA"
      style="margin-bottom: 30px"
      @blur="handleBlur"
    />
    <Card title="选择产品">
      <el-checkbox-group v-model="checkedVal" :max="1">
        <el-checkbox v-for="item in valGroup" :label="item" :key="item">
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <section v-if="checkedVal.length !== 0" style="margin-top: 20px">
        <Card title="产品属性">
          <el-form inline size="small" :model="formB" label-width="100px">
            <el-form-item label="项目名称">
              <el-input v-model="formB.valA"></el-input>
            </el-form-item>
            <el-form-item label="客户联系人">
              <el-input v-model="formB.valB"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input v-model="formB.valC"></el-input>
            </el-form-item>
            <el-form-item label="业务内容">
              <el-input v-model="formB.valD"></el-input>
            </el-form-item>
            <el-form-item label="业务范围">
              <el-input v-model="formB.valE"></el-input>
            </el-form-item>
          </el-form>
        </Card>

        <Card title="添加APN" v-for="item in addArr" :key="item">
          <div slot="cRight">
            <i
              class="el-icon-circle-plus"
              style="font-size: 22px; cursor: pointer"
              @click="addArr++"
            ></i>
            <i
              class="el-icon-delete-solid"
              style="font-size: 22px; cursor: pointer; margin-left: 8px"
              @click="addArr--"
            ></i>
          </div>
          <add />
        </Card>
        <Card title="账务信息">
          <el-form size="small" inline label-width="120px" :model="formC">
            <el-form-item label="账期生效规则">
              <el-select v-model="formC.valA" size="small">
                <el-option label="当月生效" :value="1"> </el-option>
                <el-option label="次月生效" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付模式">
              <el-select v-model="formC.valB" size="small">
                <el-option label="有限公司一点受理，一点支付" :value="1">
                </el-option>
                <el-option label="有限公司一点受理，分省支付" :value="2">
                </el-option>
                <el-option label="主办省一点受理，一点支付" :value="3">
                </el-option>
                <el-option label="主办省一点受理，分省支付" :value="4">
                </el-option>
                <el-option label="本省受理，本省支付" :value="5"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付账户">
              <el-select v-model="formC.valC" size="small">
                <el-option label="个人账户" :value="1"> </el-option>
                <el-option label="自动划款" :value="2"> </el-option>
                <el-option label="企业账户" :value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </Card>
      </section>
    </Card>
    <Table :tableData="tableData" />
  </div>
</template>

<script>
import Table from '@/components/Table'
import Card from '@/components/Card'
import add from './add'
export default {
  components: {
    Table,
    Card,
    add
  },
  data() {
    return {
      addArr: 1,
      checkedVal: [],
      valGroup: ['PCC策略局数据', '物联网', '多VPN'],
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: '',
        valF: '',
        valG: 1,
        valH: 1,
        valI: 1,
        valJ: 1,
        valK: '',
        valL: 1
      },
      formC: {
        valA: 1,
        valB: 1,
        valC: 1
      },
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '客户经理名称'
          },
          {
            prop: 'colB',
            label: '客户经理电话'
          }
        ],
        row: []
      },
      paneD: {
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: ''
            }
          ]
        }
      }
    }
  },
  methods: {
    handleBlur() {
      this.paneD.tableDataA.row = [
        {
          colA: '方宇集团',
          colB: 'A3312451296',
          colC: '北京',
          colD: '是'
        }
      ]
      this.tableData.row = [
        {
          colA: '赵亮',
          colB: '13551263844'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped></style>
